<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { deleteTableDataApi, getTableDataApi } from '@/api/table'
import { type TableData } from '@/api/table/types/table'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddUser from './addUser.vue'
defineOptions({
  name: 'ElementPlus'
})
const formData = reactive({
  userName: '',
  phone: undefined
})
const formColumns = reactive([
  {
    xType: 'Input',
    label: '用户名',
    prop: 'userName'
  },
  {
    xType: 'InputNumber',
    label: '手机号',
    prop: 'phone'
  }
])
const formRules = reactive({
  // userName: [{ required: true, message: "请输入姓名", trigger: "blur" }]
})
const tableConfig = reactive({
  btnList: [
    {
      name: '新增用户',
      type: 'primary',
      icon: 'CirclePlus',
      click: () => add()
    },
    { name: '批量删除', type: 'danger', icon: 'Delete', click: () => del() }
  ],
  tableData: [] as TableData[],
  columns: [
    { prop: 'username', label: '用户名' },
    { prop: 'roles', label: '角色' },
    { prop: 'phone', label: '手机号' },
    { prop: 'email', label: '邮箱' },
    { prop: 'status', label: '状态', slotName: 'status' },
    { prop: 'createTime', label: '创建时间' },
    { label: '操作', action: true }
  ],
  pageConfig: {
    currentPage: 1,
    size: 10,
    total: 0
  },
  showIndex: true,
  showSelection: true,
  rowKey: 'id',
  selection: [], // 选中项
  disabledSelection: [] // 禁用项
})
const handleSearch = () => {
  tableConfig.pageConfig.currentPage = 1
  getTableData()
}
const getTableData = async () => {
  const { currentPage, size } = tableConfig.pageConfig
  const params = {
    ...formData,
    currentPage,
    size
  }
  const { data } = await getTableDataApi(params)
  tableConfig.tableData = data.list
  tableConfig.pageConfig.total = data.total
}
getTableData()
const addUserRef = ref<InstanceType<typeof AddUser> | null>(null)
const add = () => {
  addUserRef.value?.open()
}
const del = () => {
  console.log('批量删除', tableConfig.selection)
  if (!tableConfig.selection.length) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
}
const handleUpdate = async (row: TableData) => {
  console.log(row)
  // const { data } = await updateTableDataApi(row as CreateOrUpdateTableRequestData)
  // console.log(data)
}
const handleDelete = async (row: TableData) => {
  ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteTableDataApi(row.id).then(() => {
        ElMessage.success('删除成功')
        getTableData()
      })
    })
    .catch(() => {})
}
</script>

<template>
  <div class="app-container">
    <form-com
      :formData="formData"
      :formColumns="formColumns"
      :formRules="formRules"
      ref="baseForm"
      @search="handleSearch"
    />
    <table-com :tableConfig="tableConfig" @refresh="getTableData">
      <template #status="{ scope }">
        <el-tag v-if="scope.row.status" type="success" effect="plain">启用</el-tag>
        <el-tag v-else type="danger" effect="plain">禁用</el-tag>
      </template>
      <template #action="{ scope }">
        <el-button type="primary" size="small" link @click="handleUpdate(scope.row)">修改</el-button>
        <el-button type="danger" size="small" link @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </table-com>
  </div>
  <add-user ref="addUserRef" @refresh="getTableData" />
</template>

<style lang="scss" scoped>
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
